<template>
  <div class="bg" v-loading="loading">
    <iframe
      ref="refIFrame"
      style="background-color: #fff"
      frameborder="no"
      width="100%"
      :height="height"
      :src="url"
      @load="onLoad"
    ></iframe>
  </div>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue'
import { useRoute } from 'vue-router'
import { util } from '@/utils'
import { token } from '@/utils/token'

const refIFrame = ref()
const loading = ref(true)
const route = useRoute()

const height = computed(() => `${util.getContentHeight()}px`)
const url = computed(() =>
  encodeURI(`${import.meta.env.VITE_BPMN_URL}?key=${route.query.key}&name=${route.query.name}`)
)

const onLoad = () => {
  let bpmnUrl = import.meta.env.VITE_BPMN_URL
  if (bpmnUrl.indexOf('http') != 0) {
    bpmnUrl = location.origin + bpmnUrl
  }
  if (refIFrame.value) {
    refIFrame.value.contentWindow.postMessage(
      {
        token: token.get()
      },
      bpmnUrl
    )
  }
  loading.value = false
}
</script>

<style lang="scss" scoped>
.bg {
  margin: -15px;
  background-color: $--color-bg-gray;
}
</style>
